import Link from "next/link";
import React from "react";
import TextAtom from "../Text.Atom";
import TextAtomEnum from "../Text.Atom/enum";
import { useCategory } from "@/business.InterfaceLayer/hooks/context/CategoryContext";

interface MenuLinksProps {
  items?: { title?: string; category?: string; link: string }[];
}

const MenuLinks: React.FC<MenuLinksProps> = (props) => {
  const { items } = props;
  const { activeCategory } = useCategory();

  return (
    <>
      {items?.map((e, index) => (
        <Link href={e.link} key={index}>
          <TextAtom
            type={TextAtomEnum.enum_h4}
            className={`font-geometria font-medium hover:text-peach cursor-pointer ${
              activeCategory === e.category
                ? "border-b-2 border-solid border-tiffany pb-1"
                : "text-textColor"
            }`}
          >
            {e.title}
          </TextAtom>
        </Link>
      ))}
    </>
  );
};
export default React.memo(MenuLinks);
